<script setup>
import { ref } from "vue";


const recordList = ref([
  {
    ending: 1,
    startHand: 1,
    count: 20,
    time: 3,
    data: '2024/1/1',
    rival:{
      id:1,
      name:"123"
    }
  },
  {
    ending: 0,
    startHand: 0,
    count: 45,
    time: 5,
    data: '2024/6/1',
    rival:{
      id:1,
      name:"123"
    }
  },
  {
    ending: 1,
    startHand: 0,
    count: 33,
    time: 7,
    data: '2024/6/2',
    rival:{
      id:1,
      name:"123"
    }
  }
])

</script>

<template>
  <div class="recordCom">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4"><div class="grid-content ep-bg-purple">结果</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">先后手</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">对手</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple">步数</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">用时</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">日期</div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row v-for="(item,i) in recordList" :key="i" :class="i%2?'bk':''">
          <el-col :span="4"><div class="grid-content" :style="item.ending?'color:#409EFF':'color:red'">{{item.ending?"胜利":"失败"}}</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">{{item.startHand?"先手":"后手"}}</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple" style="cursor:pointer">{{item.rival.name}}</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple">{{item.count}}</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">{{item.time+"分钟"}}</div></el-col>
          <el-col :span="4"><div class="grid-content ep-bg-purple-light">{{item.data}}</div></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.recordCom{
  .grid-content{
    text-align: center;
  }
  .el-row{
    border-radius: 2px;
  }
  .el-header{
    .el-row{
      background: @mainBackground;
      line-height: 50px;
      font-size: 16px;
      color: @mainColor;
    }
  }
  .el-main{
    .el-row{
      .el-col:nth-child(1){
        font-weight: bold;
      }
    }
    .grid-content{
      line-height: 40px;
    }
    .bk{
      background: @mainBackgroundLow;
    }
  }
}
</style>